<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/icon.css">
    <style>
        .load{
            display: inline-block;
            font-size: 0;
        }
        .load-list{
            display: inline-block;
            width: 10px;
            height:10px;
            border-radius:50%;
            margin-left:2px;
            animation-fill-mode: both;
            background-color: #fff;
        }

        @keyframes loadAnimate {
            50% {
                transform:scale(0.5)
            }
            100% {
                transform:scale(1)
            }
        }
        .load > .load-list:nth-child(1) {
            animation: loadAnimate 1s infinite ease-in-out;
        }
        .load > .load-list:nth-child(2) {
            animation: loadAnimate 1s 0.2s infinite ease-in-out;
        }
        .load > .load-list:nth-child(3) {
            animation: loadAnimate 1s 0.4s infinite ease-in-out;
        }
    </style>
</head>
<body>
    <section class="wrapper">

        <label class="load">
            <i class="load-list"></i>
            <i class="load-list"></i>
            <i class="load-list"></i>
        </label>

    </section>
</body>
</html>